<template>
  <div>
    <div class="register">
      <div class="register_box">
        <p>新用户注册</p>
        <p>很高兴您将成为商城的会员（注册只需要一步）</p>
        <el-input placeholder="手机号码" v-model="inputs"></el-input>
        <el-input placeholder="密码" v-model="input" show-password></el-input>
        <el-input placeholder="确认密码" v-model="inpVal" show-password></el-input>
        <el-input placeholder="用户名" v-model="inputss"></el-input>
        <div class="resg">
          <el-input class="resg-left" placeholder v-model="inputsss"></el-input>
          <div class="resg-right">
            <img :src="pic" @click="changePicOrigin" width="100%" />
          </div>
        </div>
        <el-input placeholder v-model="inputssss"></el-input>
        <div class="resg">
          <el-input placeholder v-model="inputsssss"></el-input>
          <span v-if="codeShow" @click="getPhoneCode" class="resg-right resg-right-two">获取验证码</span>
          <span v-if="!codeShow" class="resg-right resg-right-two">{{count}}秒后重试</span>
        </div>
      </div>
      <button class="register-btn">立即注册</button>
      <p class="register-p">
        <span>已有账号?</span>&nbsp;&nbsp;
        <span @click="gotologin">立即登录</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: "",
      input: "",
      inpVal: "",
      inputss: "",
      inputsss: "",
      inputssss: "",
      inputsssss: "",
      codeShow: true,
      count: "",
      timer: null,
      pic: "https://api.it120.cc/small4/verification/pic/get"
    };
  },
  methods: {
    gotologin() {
      this.$router.push({
        path: "/login"
      });
    },
    getPhoneCode() {
      //点击获取验证码
      const TIME_COUNT = 60;
      // this.timer = !this.timer
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    changePicOrigin() {
      let time = new Date().getTime();
      this.pic = "https://api.it120.cc/small4/verification/pic/get?key=" + time;
    }
  }
};
</script>

<style scoped>
.register {
  padding: 0.3rem;
  min-height: 2.5rem;
}
.register_box {
  width: 6rem;
  padding: 0 0.44rem;
  height: 11.5rem;
  min-height: 10rem;
  border: 0.02rem solid #f5f5f5;
}
.register-btn {
  height: 1rem;
  width: 3.5rem;
  display: block;
  outline: none;
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  line-height: 14px;
  font-family: roboto, helvetica;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px;
  border: 0;
  margin: 0 auto;
  margin-top: 0.6rem;
}
.register-p {
  text-align: center;
  color: blue;
  margin-top: 0.3rem;
}
.el-input {
  margin-top: 0.25rem;
}
/deep/ .el-input__inner {
  background-color: #f5f5f5;
}
.resg {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.resg-right {
  width: 50%;
  background: white;
  height: 0.85rem;
  margin-top: 0.27rem;
  position: absolute;
  top: 0;
  right: 0;
  border-left: 0.01rem solid #e4e4e4;
  border-top: 0.01rem solid #e4e4e4;
  border-right: 0.01rem solid #e4e4e4;
}
.resg-right-two {
  text-align: center;
  line-height: 0.8rem;
  background: #f5f5f5;
}
.register_box > p:nth-child(1) {
  font-size: 0.41rem;
  /* color: gray; */
  margin-top: 0.4rem;
}
.register_box > p:nth-child(2) {
  color: #909090;
  margin-top: 0.58rem;
  font-size: 0.3rem;
}
</style>